<template>
  <div class="box">
    <!-- 查询区域 -->
    <el-form ref="form" :model="form" label-width="80px" size="mini">
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-form-item label="主单号">
              <el-input v-model="form.mainOrderNumber" placeholder="请输入主单号"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-form-item label="发货人">
              <el-input v-model="form.shipmentName" placeholder="请输入发货人查询"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-form-item label="发货电话">
              <el-input v-model="form.shipmentPhone" placeholder="请输入发货电话查询"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-form-item label="发货方地址">
              <el-input v-model="form.loadingAddress" placeholder="请输入发货地址查询"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-form-item label="受理状态">
              <el-select v-model="form.isDispatch" placeholder="--请选择--">
                <el-option label="已受理" value="1"></el-option>
                <el-option label="未受理" value="0"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-form-item label="是否接单">
              <el-select v-model="form.isReceive" placeholder="--请选择--">
                <el-option label="已接单" value="1"></el-option>
                <el-option label="未接单" value="0"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <el-form-item label="下单日期">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.fromDate"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.toDate"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item>
            <el-button type="primary" size="small" class="queryMainBtn" @click="getOrderList">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格部分 -->
    <vxe-table
      border
      resizable
      stripe
      highlight-hover-row
      highlight-current-row
      show-overflow
      ref="xTable"
      height="300"
      align="center"
      :data="tableData"
    >
      <vxe-table-column min-width="160" field="isDispatch" title="是否受理">
        <template scope="scope">
          <span v-if="scope.row.isDispatch === 0">未受理</span>
          <span v-else>已受理</span>
        </template>
      </vxe-table-column>
      <vxe-table-column min-width="160" field="gmtCreated" title="下单时间" sortable></vxe-table-column>
      <vxe-table-column min-width="160" field="reserveTime" title="预约时间" sortable></vxe-table-column>
      <vxe-table-column min-width="160" field="isReserve" title="预约类型" show-overflow>
        <template scope="scope">
          <span v-if="scope.row.isReserve === 0">实时</span>
          <span v-else>预约</span>
        </template>
      </vxe-table-column>
      <vxe-table-column min-width="160" field="transportType" title="订单类型">
        <template scope="scope">
          <span v-if="scope.row.transportType === 0">包车</span>
          <span v-else>零担</span>
        </template>
      </vxe-table-column>
      <vxe-table-column min-width="160" field="detailStatus" title="订单状态">
        <!--0未接单，1已接单，2已转出，3已签收，4一键转干线5 转同城-->
        <template scope="scope">
          <span v-if="scope.row.detailStatus === 0">未接单</span>
          <span v-else-if="scope.row.detailStatus === 1">已接单</span>
          <span v-else-if="scope.row.detailStatus === 2">已转出</span>
          <span v-else-if="scope.row.detailStatus === 3">已签收</span>
        </template>
      </vxe-table-column>
      <vxe-table-column min-width="160" field="mainOrderNumber" title="主单号"></vxe-table-column>
      <vxe-table-column min-width="160" field="cargoName" title="货物名称"></vxe-table-column>
      <vxe-table-column min-width="160" field="weight" title="重量"></vxe-table-column>
      <vxe-table-column min-width="160" field="shipmentName" title="入驻商名称"></vxe-table-column>
      <vxe-table-column min-width="160" field="shipmentPhone" title="入驻商电话"></vxe-table-column>
      <vxe-table-column min-width="160" field="loadingPeople" title="联系人"></vxe-table-column>
      <vxe-table-column min-width="160" field="loadingPeoplePhone" title="联系电话"></vxe-table-column>
      <vxe-table-column min-width="160" field="loadingAddress" title="发货方地址"></vxe-table-column>
      <vxe-table-column min-width="160" field="deliveryAddress" title="目的地"></vxe-table-column>
      <vxe-table-column min-width="160" field="upstreamCost" title="上游运费"></vxe-table-column>
      <vxe-table-column min-width="160" field="driverFreight" title="司机运费"></vxe-table-column>
      <vxe-table-column min-width="160" field="paymentType" title="支付方式">
        <template scope="scope">
          <span v-if="scope.row.paymentType === 0">到付</span>
          <span v-else>现付</span>
        </template>
      </vxe-table-column>
      <vxe-table-column min-width="160" field="collectionDelivery" title="代收款"></vxe-table-column>
      <vxe-table-column min-width="160" field="preciseModel" title="是否精确车型推送">
        <template scope="scope">
          <span v-if="scope.row.preciseModel === 0">否</span>
          <span v-else>是</span>
        </template>
      </vxe-table-column>
      <vxe-table-column min-width="160" field="vehicleType" title="车型"></vxe-table-column>
      <vxe-table-column min-width="160" field="dispatchBehavior" title="受理行为">
        <template scope="scope">
          <span v-if="scope.row.dispatchBehavior === 0">派单</span>
          <span v-else-if="scope.row.dispatchBehavior === 1">竞价</span>
          <span v-else>抢单</span>
        </template>
      </vxe-table-column>
      <vxe-table-column min-width="450" title="操作" fixed="right">
        <template slot-scope="scope">
          <el-tag size="small" v-show="scope.row.buttons.modifyShow">修改</el-tag>
          <el-tag size="small" v-show="scope.row.buttons.orderShow" type="success">查看运单</el-tag>
          <el-tag size="small" v-show="scope.row.buttons.dispatchShow" type="warning" @click="dispatchCars(scope.row,0)">派单</el-tag>
          <el-tag size="small" v-show="scope.row.buttons.cancelShow" type="success">取消订单</el-tag>
          <el-tag size="small" v-show="scope.row.buttons.recordShow">调单记录</el-tag>
          <el-tag size="small" v-show="scope.row.buttons.lineShow" type="warning">路线优化</el-tag>
          <el-tag size="small" v-show="scope.row.buttons.changeShow" @click="dispatchCars(scope.row,1)">调单</el-tag>
        </template>

      </vxe-table-column>
    </vxe-table>
    <!-- 派单功能对话框 -->
    <template>
      <dispatchOrder ref="dispOrder" />
    </template>

    <!-- 分页功能 -->
     <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
import Vue from "vue";
import request from "@/utils/request";
import "xe-utils";
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import { getDispathCarsList} from "@/api/ctms";
import dispatchOrder from './components/dispatchOrder.vue'

Vue.use(VXETable,XEUtils,VXEUtils);

export default {
  name:"dispatchCars",
  components: {
    dispatchOrder
  },
  created() {
    this.dispathCarsList()
  },
  data() {
    return {
      loading: false,
      form: {pageNum:1,pageSize:10},
      tableData: [],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      orderCode:"",
      type:0
    };
  },
  methods: {
    // 获取派单列表
    dispathCarsList() {
        this.loading = true;
        return new Promise(resolve => {
          getDispathCarsList(this.form).then(response => {
            this.listQuery.total = response.data.total
            this.tableData = response.data.records
            // 判断表格操作 tag标签是否显示
            for(let item in this.tableData) {
              var buttons = {}
              var modifyShow = false //修改
              var orderShow = false  // 查看运单
              var dispatchShow = false  // 派单
              var cancelShow = false // 取消订单
              var recordShow = false  // 调单记录
              var lineShow = false //路线优化
              var changeShow = false  // 调单
              if(this.tableData[item].isReceive == 0) {
                if(this.tableData[item].isDispatch != 1) {
                  modifyShow = true
                }
                orderShow = true
                dispatchShow = true
                cancelShow = true
              } else {
                  orderShow =true
              }
              if (this.tableData[item].isReceive == 1 && this.tableData[item].signCount == 0) {
                changeShow = true
              }
              if(this.tableData[item].isArrive==0){
                  lineShow = true
                }
              if(this.tableData[item].isSingle == 1) {
                recordShow = true
              }
             /*  if(userRole=="shipment"&&this.tableData[item].transportType == 1 && this.tableData[item].detailCount > 0 && this.tableData[item].isPayed == 0) {
                运费支付
              }   */
              this.tableData[item]["buttons"] = {
                modifyShow: modifyShow,
                orderShow: orderShow,
                dispatchShow:dispatchShow,
                cancelShow:cancelShow,
                changeShow:changeShow,
                lineShow:lineShow,
                recordShow:recordShow
              }
            }
            this.loading = false;
          })
        })
    },
    // 派单对话框
    dispatchCars (data,type) {
      this.orderCode=data.code;
      this.type=type;
      this.$refs.dispOrder.dispatchVisible = true;
      this.$refs.dispOrder.driverList()
    },
    // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage
      this.listQuery.pageSize = pageSize
      this.dispathCarsList()
    },
    /*查询*/
    getOrderList(){
      this.dispathCarsList();
    }

  }

}
</script>

<style lang="scss" scoped>
.box {
  padding: 10px 10px 10px 0;
}
.queryMainBtn {
  width: 80px;
  margin: -5px 0 0 -50px;
  font-weight: bold;
}

</style>
